<!-- 题目描述 -->
<template>
    <el-row class="info">
        <el-text>
            <h1>
                {{ problemStore.problem.title_cn }}
            </h1>

        </el-text>
    </el-row>
    <el-row class="level-tags">
        <el-col :span="2">
            <el-tag class="level" style="margin-right: 15px;" :type="levelView(problemStore.problem.level)">
                {{ problemStore.problem.level }}
            </el-tag>
        </el-col>
        <el-col :span="7" style="margin-left: 5px;">
            <el-tag round v-for="tag in problemStore.problem.tags" :key="tag" :value="tag" class="tags" type="success">
                {{ tag }}
            </el-tag>
        </el-col>
        <el-col :span="7">
            <el-text>
                时间限制:
            </el-text>
            <el-tag type="warning">
                {{ problemStore.problem.cpu_limit }}
            </el-tag>
            <el-text>
                ms
            </el-text>
        </el-col>
        <el-col :span="7">
            <el-text>
                空间限制:
            </el-text>
            <el-tag type="warning">
                {{ problemStore.problem.mem_limit }}
            </el-tag>
            <el-text>
                MB
            </el-text>
        </el-col>
    </el-row>
    <el-row class="md">
        <MdPreview v-model="problemStore.problem.description" previewTheme="default" style="user-select: text;" />
    </el-row>
</template>

<script setup>
import { useProblemStore } from "@/stores/problem";

import { onMounted } from "vue";
import { useRoute } from 'vue-router';
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
import 'md-editor-v3/lib/style.css';


const problemStore = useProblemStore()
const route = useRoute()


onMounted(() => {
    getProblem()
})

// 获取题目
function getProblem() {
    problemStore.getProblem(route.fullPath)
}


function levelView(level) {
    switch (level) {
        case "简单":
            return "primary";
        case "中等":
            return "warning";
        case "困难":
            return "danger";
        default:
            return "info";
    }
}

</script>

<style scoped>
.info {
    height: 40px;
    background-color: #fff;
}

.info h1 {
    font-size: 24px;
}

.level-tags {
    padding-top: 5px;
}

.tags {
    margin-right: 5px;
}

.limit {
    margin-right: 20px;
}
</style>